<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>滑动标尺</title>
    <link rel="stylesheet" href="ruler.css"/>
    <script type="text/javascript" src='jquery-1.11.1.min.js'></script>
    <script type="text/javascript" src="ruler.js"></script>
    <style type="text/css">
    	body,html{
    		margin:0;
			height: 100%;
			width:100%;
    	}
		#box{
			height: 100%;
			width:100%;
			background: #f6f6f6;
			padding-top:40% 
		}
		#value{
			text-align: center;
			margin-bottom: 10px
		}

		button{
			border: none;
		    padding: 0;
		    width: 80px;
		    height: 30px;
		    line-height: 30px;
		    background: #00a5ff;
		    color: #fff;
		    border-radius: 5px;
		}
		.btn{
			margin-top: 10px;
			padding:10px;

		}

		.ruler2{
			font-size: 20px;
			padding:10px; 
		}

		#rulerWrapper2 {
			background: #B9C77A
		}


    </style>
</head>

<body>
	
	<div id='box'>
		<div id='value'><span class='value'>0</span><span id='unit'>g</span></div>
		<div id='rulerWrapper'></div>
		<div class='btn'><button id='btn1'>点我赋值</button> <button  id='btn2'>点我切换</button></div>
		<h2>同一页面可以有多个尺子：</h2>
		<div id='rulerWrapper2'></div>
		<p class="ruler2">值：<span  class='rval'>0</span></p>
	</div>

	<script type="text/javascript">

		//初始化尺子
		var measureRuler =new MeasureRuler({
			wrapperId:"rulerWrapper",     //容器ID，页面中写一个DIV就行 (必须)
			max:3000,                     //刻度尺最大的刻度    (非必须，默认为1000)
			minUnit:1,                    //刻度尺最小刻度    (非必须，默认为1)
			unitSet:10,                   //刻度尺单元长度    (非必须，默认是10)
　　　　　　　 value:0,                      //初始化数值       (非必须，默认为1)
			mult:1,                       //刻度值倍数，默认是最小刻度值为10px，如果定mult为3则最小刻度为30px (非必须，默认为1)
			callback:rulerSetValue,       //滑动尺子过程中的回调函数     (非必须)
			min:1000                      //刻度尺最小刻度
		})  

        //回调函数，参数为滑动过程中的值
		function rulerSetValue(val){
			$(".value").html(val)
		}    

		//赋值
		$("#btn1").click(function(){
			measureRuler.setValue(3)
		})

		//切换单位
		var unit='g';
		$("#btn2").click(function(){
			unit=unit=='g'?'份':'g';
			var nParam;

			//需要重新传入参数
			if(unit=='份'){
				nParam={
					max:6,
					minUnit:0.1,
					unitSet:5,
					mult:3,
					value:0.5
				}
			}else{
				nParam={
					max:3000,
					minUnit:1,
					unitSet:10,
					mult:1,
					value:30,
					min:1000
				}
			}

			//重新绘制图
			$("#unit").html(unit);
			measureRuler.reDrawRuler(nParam);
		})


		//初始化尺子2
		var measureRuler2 =new MeasureRuler({
			wrapperId:"rulerWrapper2",     //容器ID，页面中写一个DIV就行 (必须)
			max:100,                     //刻度尺最大的刻度    (非必须，默认为1000)
			minUnit:0.1,                    //刻度尺最小刻度    (非必须，默认为1)
			unitSet:10,                   //刻度尺单元长度    (非必须，默认是10)
　　　　　　　 value:0,                      //初始化数值       (非必须，默认为1)
			mult:1,                   //刻度值倍数，默认是最小刻度值为10px，如果定mult为3则最小刻度为30px (非必须，默认为1)
			callback:rulerSetValue2,    //滑动尺子过程中的回调函数     (非必须)
			min:1.5
		}) 

		function rulerSetValue2(val){
            $(".rval").html(val)
		}





	</script>

</body>

</html>